<!DOCTYPE html>
<style>
  .inline-center {
    text-align: center; /* 子元素内联内容居中 */
  }
  .inline-center form {
    display: inline-block; /* 表单保持原有宽度 */
    padding: 20px;
    border: 1px solid #ddd;
  }
  .center-form {
    width: 500px;
      height: 300px;/* 固定宽度 */
    margin: 0 auto;        /* 水平居中 */
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
  .select1 {
    width: 550px;
      height: 80px;/* 固定宽度 */
    margin: 0 auto;        /* 水平居中 */
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
  .butu {
    width: 550px;
      height: 60px;/* 固定宽度 */
    margin: 0 auto;        /* 水平居中 */
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }

</style>
<script>
function updateSubcategory() {
  const category = document.getElementById('category').value;
  const subcategory = document.getElementById('subcategory');
  // 清空现有选项
  subcategory.innerHTML = '<option value="" disabled>选择子分类</option>';

  // 根据选择添加选项
  if (category === 'Realistic') {
    addOption(subcategory, '摄影（真实相机效果）', '摄影（真实相机效果）');
    addOption(subcategory, '超写实（比照片还清晰）', '超写实（比照片还清晰）');
    addOption(subcategory, '微距（小物件放大）', '微距（小物件放大）');
  } else if (category === 'Artistic') {
    addOption(subcategory, '油画（厚重笔触）', '油画（厚重笔触）');
    addOption(subcategory, '水彩（柔和晕染）', '水彩（柔和晕染）');
    addOption(subcategory, '素描（黑白手绘）', '素描（黑白手绘）');
    addOption(subcategory, '中国水墨（东方意境）','中国水墨（东方意境）');
    addOption(subcategory, '粉笔画（童趣、简洁）','粉笔画（童趣、简洁）');
  } else if (category == 'Two-dimensional'){
        addOption(subcategory, '漫画（日漫风）', '漫画（日漫风）');
        addOption(subcategory, '动漫（彩色、二次元人物）', '动漫（彩色、二次元人物）');
        addOption(subcategory, '美式卡通（夸张幽默）', '美式卡通（夸张幽默）');
        addOption(subcategory, 'Q版（可爱小比例）', 'Q版（可爱小比例）');
  } else if (category == 'Special'){
        addOption(subcategory, '赛博朋克（霓虹、未来感）', '赛博朋克（霓虹、未来感）');
        addOption(subcategory, '蒸汽朋克（机械齿轮）', '蒸汽朋克（机械齿轮）');
        addOption(subcategory, '洛可可（华丽装饰）', '洛可可（华丽装饰）');
        addOption(subcategory, '低多边形（游戏建模感）','低多边形（游戏建模感）');
        addOption(subcategory, '像素风（8-bit怀旧）','像素风（8-bit怀旧）');
        addOption(subcategory, '扁平插画（简洁、信息图风）','扁平插画（简洁、信息图风）');
  }
}

function Size_updateSubcategory() {
  const category = document.getElementById('Size').value;
  const subcategory = document.getElementById('Size_subcategory');
  // 清空现有选项
  subcategory.innerHTML = '<option value="" disabled>选择子分类</option>';

  // 根据选择添加选项
  if (category === 'Horizontal_image') {
    addOption(subcategory, '21:9', '21:9（电影宽银幕）');
    addOption(subcategory, '16:9', '16:9（电脑屏幕 / 视频）');
    addOption(subcategory, '3:2', '3:2（单反相机）');
  } else if (category === 'Square') {
    addOption(subcategory, '1:1', '1:1（头像 / 社交媒体）');
  } else if (category == 'Vertical_image'){
        addOption(subcategory, '9:16', '9:16（手机竖屏视频 / 抖音）');
        addOption(subcategory, '4:5', '4:5（小红书常用）');
        addOption(subcategory, '2:3', '2:3（杂志封面常见）');
        addOption(subcategory, '5:4', '5:4（老式艺术画幅）');
  }
}

function addOption(selectElement, value, text) {
  const option = document.createElement('option');
  option.value = value;
  option.textContent = text;
  selectElement.appendChild(option);
}

function fd(){
    document.querySelector('form').addEventListener('submit', function(e) {
  const submitBtn = this.querySelector('button[type="submit"]');
  submitBtn.disabled = true;  // 禁用按钮
  submitBtn.textContent = '提交中...';  // 改变按钮文字
});
}
</script>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form class="inline-center" action='/test/' method="post" >
    <textarea class="center-form" name="prompt" placeholder="对图片的描述，例如25岁亚洲女性模特，身着绣花红色真丝连衣裙，布料被风吹动的动态感"></textarea><br>

    <h3>画面风格</h3>
    <select id="category" style="width: 250px;height: 40px" onchange="updateSubcategory()">
        <option value="无" disabled selected>请选择画面类别</option>
      <option value="Realistic">写实类</option>
      <option value="Artistic">艺术类</option>
      <option value="Two-dimensional">二次元类</option>
      <option value="Special">特殊风格</option>
    </select>
    <!-- 第二个下拉框（嵌套） -->
    <select id="subcategory" style="width: 250px;height: 40px" name="Art_style" onchange="schange">
      <option value="无">请先选择风格分类</option>
    </select><br>

    <h3>尺寸比例</h3>
    <select id="Size" style="width: 250px;height: 40px"  onchange="Size_updateSubcategory()">
        <option value="无" disabled selected>请选择图像类型</option>
      <option value="Horizontal_image">横图</option>
      <option value="Square">方图</option>
      <option value="Vertical_image">竖图</option>
    </select>
    <select id="Size_subcategory" style="width: 250px;height: 40px" name="Size">
      <option value="无">请先选择尺寸分类</option>
    </select><br>
    <h3>拍摄方式</h3>
    <select name="Shoot" style="width: 500px;height: 40px">
        <option value="无" disabled selected>请选择拍摄方式</option>
        <option value="广角镜头">广角镜头（空间感强）</option>
        <option value="长焦镜头">长焦镜头（背景虚化）</option>
        <option value="鱼眼镜头">鱼眼镜头（夸张变形）</option>
        <option value="特写镜头">特写镜头（突出细节）</option>
        <option value="航拍">航拍 / 俯视（从上往下）</option>
        <option value="仰视">仰视（从下往上看）</option>
        <option value="主观视角">主观视角（像自己亲眼看到）</option>
    </select><br>
    <h3>构图方式</h3>
    <select name="Composition" style="width: 500px;height: 40px">
        <option value="无" disabled selected>请选择构图方式</option>
        <option value="居中构图">居中构图（主体在中央）</option>
        <option value="三分法">三分法（黄金比例）</option>
        <option value="对称构图">对称构图（左右对称）</option>
        <option value="电影感">电影感（像大片画面）</option>
    </select><br>
    <h3>画面效果/环境氛围</h3>
    <select name="Picture_effect" style="width: 250px;height: 40px">
        <option value="无" disabled selected>请选择画面效果</option>
        <option value="黄金时刻">黄金时刻（日落柔光）</option>
        <option value="夜景">夜景（霓虹、星空）</option>
        <option value="高对比度">高对比度（黑白分明）</option>
        <option value="柔焦">柔焦（梦幻）</option>
        <option value="HDR">HDR（色彩丰富）</option>
    </select>
    <select name="environmental" style="width: 250px;height: 40px">
        <option value="无" disabled selected>请选择环境氛围</option>
        <option value="动态模糊">动态模糊（运动感）</option>
        <option value="雨天">雨天</option>
        <option value="雪天">雪天</option>
        <option value="雾气">雾气</option>
        <option value="烟雾">烟雾</option>
        <option value="火焰">火焰</option>
        <option value="雷电">雷电</option>
        <option value="复古颗粒感">复古颗粒感（老照片）</option>
        <option value="梦境">梦境</option>
        <option value="超现实">超现实</option>
        <option value="幻觉">幻觉</option>
    </select><br>

    <select class="select1" name="choice">
        {% for ai in ais %}
        <option value="{{ai.code}}">{{ai.name}}</option>
        {% endfor %}
    </select>
    <p><input class="butu" type="submit" value="确定" onchange="fd()"></p>
</form>
</body>
</html>